import React, { Component } from 'react';
import UseState from './useState.js';
import {ColorContext} from './ColorContext.js'
import Chuan from './chuan';
class App extends Component {
  state={
    name:1,
    style:{
      width:"300px",
      height:'300px',
      background:'yellow'
    },
    show:false
   }
   
   add = ()=>{
    //  此处通过传入函数和值来改变父级中的参数
     this.setState((state)=>{
       return {name:state.name+1}
     })
   }

  render() { 
    
    return ( 
      
      <ColorContext.Provider value='这就是木偶组件使用的上下文'>
      <div>
      <Chuan name={this.add} ref='chuan'></Chuan>
        <div>测试useStated的页面</div>
        <button onClick={()=>{
          this.setState({show:!this.state.show})
        }}>切换子组件</button>
       {this.state.show||<UseState>测试useState</UseState>}
       <button onClick={()=>{
         this.refs.chuan.cut()//注意这里只能强行调用此方法，但是不能打印出来
       }}></button>
    </div>
   </ColorContext.Provider>
     )
  }

}
//**************************模式二*********************** */
//  function App(){
//     return ( 
//       <ColorContext.Provider value={'55'}>
//       <div>
//    <UseState>测试useState</UseState>
//     </div>
//     </ColorContext.Provider>
//      )
//  }
export default App;


